 <template>
  <div class="index-box" ref="index">
          <div class="echartBox d-flex" ref="echartBox">
            <el-card class="box-card flex1" style="margin-right:10px">
              <div id="leftEchart" ref="leftEchart"></div>
            </el-card>
            <el-card class="box-card flex1" style="margin-left:10px">
              <div id="rightEchart" ref="rightEchart"></div>
            </el-card>
          </div>

          <div class="moneyTotal" ref="moneyTotal" style="margin: 15px 0;">
              <div class="item">
                <div class="money">¥{{topData.platformDistributionAmount}}</div>
                <div class="text">平台发放总金额(元)</div>
              </div>
              <div class="item">
                <div class="money">￥{{topData.platformVerificationAmount}}</div>
                <div class="text">平台核销总金额(元)</div>
              </div>
              <div class="item">
                <div class="money">￥{{topData.platformNotAmount}}</div>
                <div class="text">平台未核销总金额(元)</div>
              </div>
          </div>
          <div class="export" ref="export" style="display: flex;justify-content: end;padding-bottom: 10px;">
            <el-button
              type="primary"
              icon="el-icon-download"
              size="small"
              :loading="btnLoading"
               v-has="'statistics:voucherDetails:down'"
              @click="handleExport"
            >导出</el-button>
          </div>
          <div class="table" ref="table">
            <el-table :data="dataList" style="width: 100%;" :height="tableHeight" border v-loading="loading" stripe>
              <el-table-column type="index" label="编号" align="center" width="70"/>
              <el-table-column prop="goodsName" label="商品名称" align="center"/>
               <el-table-column prop="storeName" label="商家名称" align="center"/>
              <el-table-column prop="orderId" label="关联订单编号" align="center"/>
              <el-table-column prop="userName" label="用户名" align="center"/>
              <el-table-column prop="telephone" label="手机号" align="center"/>
              <el-table-column prop="couponTotal" label="消费券总额" align="center"/>
              <el-table-column prop="deductionAmount" label="抵扣金额" align="center"/>
              <el-table-column prop="orderAmount" label="订单金额" align="center"/>
              <el-table-column prop="createTime" label="订单时间" align="center" />
              <el-table-column prop="actualPayPrice" label="实付金额" align="center"/>
            </el-table>
          </div>
          <div class="page" ref="page">
           <MyPagination
              :total="total"
              :page.sync="searchForm.pageNum"
              :limit.sync="searchForm.pageSize"
              @pagination="tableList"
            />
          </div>

  </div>
</template>

<script>
  import common from '@/api/api';
  import {
    getCouponSource, getCouponVerification, getOrderCouponItemList, getPolylineStatistics, orderCouponItemListExport
  } from '@/api/getData'
  import option from '../../common/option.js';

  export default {
    data() {
      return {
        loading: false,
        btnLoading:false,
        searchForm: {
          pageNum: 1,
          pageSize: 20,
        },
        tableHeight:0,//table 高度
        statusRow:{},
        dataList:[],
        total: 0,
        topData:{},

        consumerVoucherSum:0
      }
    },
    created() {

    },
    mounted() {
      this.dataInfo();
      this.tableList();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight - this.$refs.page.offsetHeight  - this.$refs.moneyTotal.offsetHeight  - this.$refs.echartBox.offsetHeight  - 100;
      })
    },
    methods: {
      async tableList() {
        try {
          this.loading = true;
          const result = await getOrderCouponItemList(this.searchForm);
          if (result.code == 200) {
            this.total = result.total;
            this.dataList = result.rows;
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },
      dataInfo(){
        //饼图
        getCouponSource().then(result=>{
          if (result.code == 200) {
              let data = result.data;
              console.log(data);
              data.map(item=>{
                item.value = item.num;
                item.name = item.type;
                this.consumerVoucherSum += item.num;
              })
              this.getCouponSourceFn(data);
          } else {
            this.$message.error(result.msg);
          }
        })
        //折线图
        getPolylineStatistics({date:'2023'}).then(result=>{
          if (result.code == 200) {
            let xData = [];
            let yData = [];
            for(let i = 0;i<result.rows.length;i++){
              xData.push(result.rows[i].dataDate);
              yData.push(result.rows[i].couponUseAmount);
            }
            this.getPolylineStatisticsFn(xData,yData)
          } else {
            this.$message.error(result.msg);
          }
        })
        getCouponVerification().then(result=>{
          if (result.code == 200) {
            this.topData = result.data;
          } else {
            this.$message.error(result.msg);
          }
        })
      },
      getCouponSourceFn(data){
        let myChart = this.$echarts.init(document.getElementById('leftEchart'));
        let consumerVoucherSum = this.consumerVoucherSum;
        myChart.setOption({
          title: {
            text: '消费券来源统计',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
             formatter: function (params) {
               let proportion = (params.data.value / consumerVoucherSum * 100) .toFixed(2) +'%';
                console.log(proportion)
                  return (`<div class='hang'>
                <div>
                  <div>${params.data.name}总数:${params.data.num}</div>
                  <div>占比:${proportion}</div>
                </div>
               </div>`);
                },
          },
          legend: {
             top: 'bottom'
          },
          series: [
            {
              type: 'pie',
              radius: '50%',
              data: data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        });
      },
      //右上角折线图渲染
      getPolylineStatisticsFn(xData,yData){
        let myChart = this.$echarts.init(document.getElementById('rightEchart'));
        myChart.setOption({
             title: {
               text: '消费券使用情况',
                x:'center',
                y:'top',
               textAlign:'center'
             },
             tooltip: {
               trigger: 'axis'
             },
             legend: {
               data: ['Email'],
               top: 'bottom',
             },
             grid: {
               left: '3%',
               right: '4%',
               bottom: '10%',
               containLabel: true
             },
             toolbox: {

             },
             xAxis: {
               type: 'category',
               boundaryGap: false,
               data: xData
             },
             yAxis: {
               type: 'value'
             },
             series: [
               {
                 name: '总核销',
                 type: 'line',
                 stack: 'Total',
                 data: yData
               }
             ]
        });
      },
      playCharts(xData,yData) {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('rightEchart'));
        let title = (this.unit == '万元'?'云仓总收益(年)':'云仓总收益(月)')
        // 绘制图表
        myChart.setOption({
             title: {
               text: title,
                x:'center',
                y:'top',
               textAlign:'center'
             },
             tooltip: {
               trigger: 'axis'
             },
             legend: {
               data: ['Email'],
               top: 'bottom',
             },
             grid: {
               left: '3%',
               right: '4%',
               bottom: '10%',
               containLabel: true
             },
             toolbox: {

             },
             xAxis: {
               type: 'category',
               boundaryGap: false,
               data: xData
             },
             yAxis: {
               type: 'value'
             },
             series: [
               {
                 name: '总收益',
                 type: 'line',
                 stack: 'Total',
                 data: yData
               }
             ]
        });
      },
      /** 导出按钮操作 */
      handleExport() {
        this.$modal.confirm('是否确认导出所有用户数据项？').then(() => {
          this.btnLoading = true;
          return orderCouponItemListExport();
        }).then(response => {
          console.log(response.msg)
          this.$download.name(response.msg);
          this.btnLoading = false;
        }).catch(() => {});
      }

    }
  }
</script>

<style scoped lang="scss">

  #rightEchart,#leftEchart{
    width:100%;
    height:320px;
    margin-bottom:15px;
  }
  .el-table .el-dropdown-link{
      cursor: pointer;
      color: #61997A;
      margin-left: 5px;
  }
    .leftDialog{
      height:540px;
      overflow-y: auto;
    }
    .activeVerticalBox .activeItem{
      color:#61997A;
      cursor: pointer;
      margin: 0px;
      text-align: center;
      height:20px;
      line-height: 20px;
    }
    .activeVerticalBox .el-dropdown{
      display: flex;
      justify-content: center;
      color:#61997A;
      cursor: pointer;
    }
    .activeCheckedBox{
      border-top: 1px solid #ddd;
      padding:10px;
      height:52px;
      .el-tag{
        margin-right:10px;
      }
    }
    .rateBox /deep/ .el-rate__icon{
      margin-right: 0px;
    }
    .rateBox>p{
      margin: 0px;
    }
    .rateBox>p> /deep/ .el-rate{
      height:25px;
      line-height:25px;
      display:flex;
    }
    .rateBox>p> /deep/ .el-rate .el-rate__item{
      display:flex;
      align-items: center;
    }
    .rateBox .rateText{
      width:60px;
    }
    .rateBox .content{
      display: flex;
    }
    .rateBox .el-tooltip{
      width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: inline-block;
    }
</style>
